<template>
  <div>
    <h3>汇总信息</h3>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span style="font-weight: bold">销量排行</span>
          </div>
          <!-- 图表容器它一定要有一固定高度 -->
          <div ref="chartRef" style="height: 300px"></div>
        </el-card>
      </el-col>
      <el-col :span="12">aaaa</el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  mounted() {
    // 初始化echarts实例
    this.myChart = echarts.init(this.$refs.chartRef, '', { renderer: 'canvas' })
    this.myChart.setOption({
      title: {
        show: false,
        text: 'ECharts学习与使用'
      },
      tooltip: {
        show: false
      },
      legend: {
        show: false,
        data: ['销量1'],
        right: 10
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {
        type: 'value'
      },
      grid: {
        show: false,
        left: 30,
        top: 10,
        right: 20,
        bottom: 30
      },
      // 坐标系,它可以有多个
      series: [
        {
          name: '销量1',
          type: 'bar',
          data: [50, 20, 36, 10, 10, 20]
        }
      ]
    })
  },
  beforeDestroy() {
    // 销毁实例
    this.myChart && this.myChart.dispose()
    this.myChart = null
  }
}
</script>

<style lang="scss" scoped></style>
